<template>
	<el-drawer v-model="drawerVisible" title="布局设置" size="300px">
		<!-- 布局切换 -->
		<el-divider class="divider" content-position="center">
			<el-icon><Notification /></el-icon>
			布局切换
		</el-divider>
		<div class="layout-box mb30">
			<el-tooltip effect="dark" content="纵向" placement="top" :show-after="200">
				<div
					:class="['layout-item layout-vertical', { 'is-active': layout == 'vertical' }]"
					@click="setLayout('vertical')"
				>
					<div class="layout-dark"></div>
					<div class="layout-container">
						<div class="layout-light"></div>
						<div class="layout-content"></div>
					</div>
					<el-icon v-if="layout == 'vertical'"><CircleCheckFilled /></el-icon>
				</div>
			</el-tooltip>
			<el-tooltip effect="dark" content="经典" placement="top" :show-after="200">
				<div
					:class="['layout-item layout-classic', { 'is-active': layout == 'classic' }]"
					@click="setLayout('classic')"
				>
					<div class="layout-dark"></div>
					<div class="layout-container">
						<div class="layout-light"></div>
						<div class="layout-content"></div>
					</div>
					<el-icon v-if="layout == 'classic'"><CircleCheckFilled /></el-icon>
				</div>
			</el-tooltip>
			<el-tooltip effect="dark" content="横向" placement="top" :show-after="200">
				<div
					:class="['layout-item layout-transverse', { 'is-active': layout == 'transverse' }]"
					@click="setLayout('transverse')"
				>
					<div class="layout-dark"></div>
					<div class="layout-content"></div>
					<el-icon v-if="layout == 'transverse'"><CircleCheckFilled /></el-icon>
				</div>
			</el-tooltip>
			<el-tooltip effect="dark" content="分栏" placement="top" :show-after="200">
				<div
					:class="['layout-item layout-columns', { 'is-active': layout == 'columns' }]"
					@click="setLayout('columns')"
				>
					<div class="layout-dark"></div>
					<div class="layout-light"></div>
					<div class="layout-content"></div>
					<el-icon v-if="layout == 'columns'"><CircleCheckFilled /></el-icon>
				</div>
			</el-tooltip>
		</div>

		<!-- 全局主题 -->
		<el-divider class="divider" content-position="center">
			<el-icon><ColdDrink /></el-icon>
			全局主题
		</el-divider>
		<div class="theme-item">
			<span>主题颜色</span>
			<el-color-picker v-model="primary" :predefine="colorList" @change="changePrimary" />
		</div>
		<div class="theme-item">
			<span>暗黑模式</span>
			<SwitchDark />
		</div>
		<div class="theme-item">
			<span>灰色模式</span>
			<el-switch v-model="isGrey" @change="changeGreyOrWeak('grey', !!$event)" />
		</div>
		<div class="theme-item">
			<span>色弱模式</span>
			<el-switch v-model="isWeak" @change="changeGreyOrWeak('weak', !!$event)" />
		</div>
		<div class="theme-item mb40">
			<span>
				侧边栏反转色
				<el-tooltip effect="dark" content="该属性目前只在纵向布局模式下生效" placement="top">
					<el-icon><QuestionFilled /></el-icon>
				</el-tooltip>
			</span>
			<el-switch v-model="asideInverted" :disabled="layout !== 'vertical'" @change="setAsideTheme" />
		</div>

		<!-- 界面设置 -->
		<el-divider class="divider" content-position="center">
			<el-icon><Setting /></el-icon>
			界面设置
		</el-divider>
		<div class="theme-item">
			<span>折叠菜单</span>
			<el-switch v-model="isCollapse" />
		</div>
		<div class="theme-item">
			<span>面包屑</span>
			<el-switch v-model="breadcrumb" />
		</div>
		<div class="theme-item">
			<span>面包屑图标</span>
			<el-switch v-model="breadcrumbIcon" />
		</div>
		<div class="theme-item">
			<span>标签栏</span>
			<el-switch v-model="tabs" />
		</div>
		<div class="theme-item">
			<span>标签栏图标</span>
			<el-switch v-model="tabsIcon" />
		</div>
		<div class="theme-item">
			<span>页脚</span>
			<el-switch v-model="footer" />
		</div>
	</el-drawer>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { storeToRefs } from "pinia";
import { useTheme } from "@/hooks/useTheme";
import { useGlobalStore } from "@/stores/modules/global";
import { DEFAULT_PRIMARY } from "@/config";
import mittBus from "@/utils/mittBus";

import type { GlobalState } from "@/stores/modules/global/typing";
const { changePrimary, changeGreyOrWeak, setAsideTheme } = useTheme();

const globalStore = useGlobalStore();
const {
	layout,
	primary,
	isGrey,
	isWeak,
	asideInverted,
	isCollapse,
	breadcrumb,
	breadcrumbIcon,
	tabs,
	tabsIcon,
	footer
} = storeToRefs(globalStore);

// 预定义主题颜色
const colorList = [
	DEFAULT_PRIMARY,
	"#daa96e",
	"#0c819f",
	"#409eff",
	"#27ae60",
	"#ff5c93",
	"#e74c3c",
	"#fd726d",
	"#f39c12",
	"#9b59b6"
];

// 设置布局方式
const setLayout = (val: GlobalState["layout"]) => {
	globalStore.setGlobalState("layout", val);
	setAsideTheme();
};

// 打开主题设置
const drawerVisible = ref(false);
mittBus.on("openThemeDrawer", () => (drawerVisible.value = true));
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
